<template>
	<view class="box">
		<view class="title">欢迎登陆</view>
		<view class="name">
			智慧课堂
		</view>
		<image src="../../static/logo.png" mode=""></image>
		<view class="body">
			<view class="username">
				<label for="username">账号</label>
				<input type="number" id="username" name="username" v-model="username" placeholder="请输入账号">
			</view>

			<view class="password">
				<label for="password">密码</label>
				<input type="password" id="password" name="pwd" v-model="password" placeholder="请输入密码">
			</view>
			<view class="forgot" @click="goEdit">
				忘记密码？
			</view>
			<button type="primary" @click="goLoign">登录</button>
		</view>

	</view>
</template>

<script>
	import server from '@/util/http.js'
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			//调用登录接口 
			goLoign() {
				if (this.username !== '' && this.username !== '') {
					server({
						url: 'http://101.43.227.220:3003/teacher/login',
						method: 'post',
						data: {
							"jobNumber": this.username,
							"password": this.password
						},
						success: res => {
							if (res.code === 200) {
								uni.setStorage({
									key: 'token',
									data: res.data.token
								});
								uni.setStorage({
									key: 'photoUrl',
									data: res.data.teacher.photo
								});
								uni.setStorage({
									key: 'teacher',
									data: res.data.teacher
								});
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: '账号或密码不正确'
								})
							}

						},
						fail: error => {
							console.log(error);
						}
					})
				} else {
					uni.showToast({
						title: '你输入的账号密码格式错误',
						icon: 'error'
					})
				}
			},
			//修改密码
			goEdit() {
				uni.navigateTo({
					url: '../editPwd/editPwd'
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 86%;
		margin: 200rpx auto;
	}

	.title {
		font-size: 40rpx;
		text-align: left;
		margin-top: 40rpx;
	}

	.name {
		margin-top: 20rpx;
		font-size: 34rpx;
	}

	.box image {
		width: 140rpx;
		height: 140rpx;
		display: block;
		margin: 0 auto;
		margin-top: 100rpx;
	}

	.body {
		margin-top: 140rpx;
	}

	.body input {
		padding: 20rpx 0rpx 10rpx 0rpx;
		border-bottom: 1px solid lightgray;
		font-size: 34rpx;
	}

	.body label {
		font-size: 36rpx;
	}

	.body button {
		margin-top: 20rpx;
	}

	.forgot {
		color: blue;
		text-align: right;
		margin-top: 20rpx;
	}

	.password {
		margin-top: 14rpx;
	}
</style>
